<template>
  <div class="tree-container">
    <div :class="['middle', first ? 'middle1' : '']">
      <el-tree
        ref="refTree"
        :data="data"
        :props="defaultProps"
        @node-click="handleNodeClick"
        node-key="id"
        highlight-current
        :expand-on-click-node="false"
      >
        <div
          class="custom-tree-node"
          slot-scope="{ node, data }"
          @mouseenter="slideIn(data)"
          @mouseleave="slideAway(data)"
        >
          <div>
            <!-- <i class="iconfont qiye"></i> -->
            <i class="iconfont jigouguanli" v-if="data.type == '1'"></i>
            <i class="iconfont zuzhi" v-else-if="data.type == '2'"></i>
            <i class="iconfont ditu2" v-else-if="data.type == '3'"></i>
            <i class="iconfont icon_unit" v-else-if="data.type == '4'"></i>
            {{ node.label }}
          </div>
        </div>
      </el-tree>
    </div>
  </div>
</template>

<script>
import { reqOrgList, reqOrgDel, reqOrgExit } from "@api/api.js";
import { mapState } from "vuex";
import { transTree } from "@utils/trans-tree";

export default {
  components: {},
  props: {},
  mixins: [],
  data() {
    return {
      total: 0,
      orgName: "",
      regionCode: "",
      regionLevel: "",
      defaultProps: {
        children: "children",
        label: "orgName",
        isLeaf: "hasChildren",
        id: "id",
      },
      first: false, //第一次加载，点击后消除
      data: [],
      checkkey: 0, //保留选中的key
    };
  },
  computed: {
    ...mapState(["user","spacesManage"]),
  },
  watch: {},
  created(){
  },
  mounted(){
    this.getDataList()
  },
  methods: {
    // 搜索条件改变
    handleParam(data = {}) {
      // console.log( "搜索条件改变",data,);
      this.orgName = data.orgName;
      this.regionCode = data.regionCode;
      this.regionLevel = data.regionLevel;
      this.getDataList();
    },
    // 获取列表
    async getDataList() {
      let params = {
        tenantId: this.user.tenantId,
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgName: this.orgName,
        regionCode: this.regionCode,
        regionLevel: this.regionLevel,
         type:"1,2,3,4"
      };
      let res = await reqOrgList( params);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      let { rows, total } = res.data;
      this.data = transTree(rows);//返回全部数据
      // console.log("getDataList111", this.data );
      // let unitTree = [];
      // rows.forEach((item) => {
      //   if (item.hasChildren === 1) {
      //     item.hasChildren = false;
      //   } else {
      //     item.hasChildren = true;
      //   }
      //   unitTree.push({
      //     orgName: item.orgName,
      //     children: [],
      //     id: item.id,
      //     hasChildren: item.hasChildren,
      //     level: item.level,
      //   });
      //   item.regionName = item.orgName;
      // });
      // this.data = unitTree;
      // this.$emit("toggleOrgList", rows);
    },
    // 树节点懒加载
    // async loadNode(node, resolve) {
    //   // console.log("loadNode", node);
    //   if (node.level == 0) {
    //     // 如果是一级单位
    //     let params = {
    //       tenantId: this.user.tenantId,
    //       userId: this.user.userId,
    //       roleName: this.user.roleName,
    //       orgName: this.orgName,
    //        type:"1,2,3,4"
    //     };
    //     let res = await reqOrgList( params);
    //     if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
    //     let { rows, total } = res.data;
    //     // rows.forEach((item) => {
    //     //   if (item.hasChildren === 1) {
    //     //     item.hasChildren = false;
    //     //   } else {
    //     //     item.hasChildren = true;
    //     //   }
    //     // });

    //     if (
    //       this.user.roleName == "ORG_ADMIN" ||
    //       this.user.roleName == "INSTERALL_USER"
    //     ) {
    //       // 组织||装维 逻辑
    //       rows.forEach((item) => {
    //         if (item.hasChildren === 1) {
    //           item.hasChildren = false;
    //         } else {
    //           item.hasChildren = true;
    //         }
    //       });
    //       // 只加载选中的组织机构
    //       rows = rows
    //         .filter(
    //           (item) => item.id == this.spacesManage.organizationInfo.orgId
    //         )
    //         .map((item) => ({
    //           id: item.id,
    //           orgName: item.orgName,
    //           children: item.children,
    //           lng: item.lng,
    //           lat: item.lat,
    //         }));
    //     } else {
    //       // 租户级
    //       rows.forEach((item) => {
    //         if (item.hasChildren === 1) {
    //           item.hasChildren = false;
    //         } else {
    //           item.hasChildren = true;
    //         }
    //       });
    //     }

    //     if (rows.length > 0) {
    //       let data = {
    //         orgId: rows[0].id,
    //         orgName: rows[0].orgName,
    //         role: rows[0].role,
    //         lng: rows[0].lng,
    //         lat: rows[0].lat,
    //       };
    //       // console.log("组件data", rows[0]);
    //       //   this.$emit("toggleOrgId", rows[0]);
    //     } else {
    //       // 组织机构筛选为空时
    //       let data = {
    //         orgId: "",
    //         orgName: "",
    //         role: 2,
    //         lng: '',
    //         lat: '',
    //       };
    //       this.$emit("toggleOrgId", data);
    //     }
    //     return resolve(rows);
    //   } else {
    //     // 否则是下级单位
    //     let params = {
    //       tenantId: this.user.tenantId,
    //       userId: this.user.userId,
    //       roleName: this.user.roleName,
    //       orgName: this.orgName,
    //       parentId: node.data.id,
    //        type:"1,2,3,4"
    //     };
    //     let res = await reqOrgList( params);
    //     if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
    //     let rows = res.data.rows;
    //     rows.forEach((item) => {
    //       if (item.hasChildren === 1) {
    //         item.hasChildren = false;
    //       } else {
    //         item.hasChildren = true;
    //       }
    //     });
    //     return resolve(rows);
    //   }
    // },
    // 点击一条
    handleNodeClick(data) {
      // console.log("组件data", data);
      //   let params = {
      //     orgId: data.id,
      //     orgName: data.orgName,
      //     role: data.role,
      //   };
        if (data.type != 4) {
        this.$refs.refTree.setCurrentKey(this.checkkey ||null); //通过 key 设置某个节点的当前选中状态,为 null 则取消当前高亮的节点
        return; //只走单位
      }
      this.checkkey = data.id; // 存储选中的key
      // if(data.type!=4) return;
      this.$emit("toggleOrgId", data);
      // this.first = false;
    },

    // 滑动进去一条
    slideIn(data) {
      this.$set(data, "showCtrls", true);
    },
    slideAway(data) {
      // console.log(data);
      this.$set(data, "showCtrls", false);
    },
  },
};
</script>

<style scoped lang="less">
.tree-container {
  width: 100%;
  height: 100%;
  // background: rgb(156, 253, 184);

  .middle {
    height: calc(100%);
    overflow: hidden;
    overflow-y: scroll;

    .custom-tree-node {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      padding-left: 0.5%;
      box-sizing: border-box;

      .guanliyuan_guanliyuanliebiao {
        position: absolute;
        left: -2.5%;
        font-size: 12px;
      }

      .tree-node_ctrls {
        position: absolute;
        right: 0;
        width: 30%;
        text-align: right;
        padding-right: 10px;
        // background-color: pink;

        i {
          color: #aaa;
          font-size: 20px;
          margin-right: 10px;

          &:hover {
            color: #fff;
          }
        }
      }
    }

    ::v-deep .el-tree {
      height: 100%;
      font-size: 14px;
      //   background: @primaryHeaderBgcolor;
      box-sizing: border-box;
      padding: 12px 10px;
      color: @primaryThemeTxtColor;
      overflow: hidden;
      overflow-y: scroll;
    }

    ::v-deep .el-tree-node__content {
      // padding: 5px 0 !important;
      &:hover {
        background: #635fda !important;
        border-radius: 4px;
      }
    }

    ::v-deep .el-tree-node.is-current.is-focusable > .el-tree-node__content {
      //   background-color: #7367f0 !important;
      border-radius: 4px;
    }

    ::v-deep .el-tree-node.is-focusable > .el-tree-node__content {
      padding: 5px 0;
    }

    // 解决点击白底问题
    ::v-deep .el-tree-node.is-focusable > .el-tree-node__content {
      // background-color: @primaryTree;
      border-radius: 4px;
    }

    ::v-deep .is-current > .el-tree-node__content > .el-tree-node__label {
      color: #f0f0f0;
    }

    .el-icon-more {
      color: @primaryThemeTxtColor;
      font-size: 15px;
      margin-right: 10px;
    }

    // 组织机构更多
    ::v-deep
      .is-current
      > .el-tree-node__content
      > .custom-tree-node
      > .el-dropdown
      .el-icon-more {
      color: #f0f0f0;
    }
  }

  .middle1 {
    // ::v-deep .el-tree .el-tree-node.is-focusable:first-child {
    //   background-color: #7367f0 !important;
    //   border-radius: 4px;
    //   .el-tree-node__content {
    //     color: #f6f6f6;
    //   }

    //   .el-tree-node__content {
    //     padding: 5px 0 !important;
    //     &:hover {
    //       background: #7367f0 !important;
    //       border-radius: 4px;
    //     }
    //   }
    // }

    // 解决点击白底问题
    ::v-deep .el-tree > .el-tree-node:first-of-type > .el-tree-node__content {
      background-color: #7367f0 !important;
      color: #f0f0f0;
    }

    // 组织机构更多
    ::v-deep
      .el-tree
      > .el-tree-node:first-of-type
      > .el-tree-node__content
      .el-icon-more {
      color: #f0f0f0;
    }
  }
}

// 解决收起后白色背景问题
::v-deep .el-tree-node.is-expanded > .el-tree-node__content {
  background-color: transparent;
}

// 解决展开后白色背景问题
::v-deep .el-tree-node.is-focusable > .el-tree-node__content {
  background-color: transparent;
}

// 选中的背景色
::v-deep .el-tree-node.is-current > .el-tree-node__content {
  background-color: #7367f0 !important;
}

// input后面的查询按钮
::v-deep .el-input-group__append {
  color: #fff;
  border: none;
  background-color: #7367f0;
}

// .el-tree-node__expand-icon {
//   color: #01b7c9;
// }
// 改变颜色后，这个一定要设成透明
// .el-tree-node__expand-icon.is-leaf {
//   color: #c0c4cc !important;
// }
// ::v-deep .el-tree-node__expand-icon.is-leaf {
//   color: #c0c4cc !important;
// }
</style>
